<html>
	<head>
		<link rel="stylesheet" href="./jquery.ui.ruler.css">
		<script src="./jquery.min.js"></script>
		<script src="./jquery-ui.min.js"></script>       
		<script src="./jquery.ui.ruler.js"></script>           
		<script src="./zrender.js"></script>
		<style>
			.pDiv{
				width:91%;
				height:400px;
				border:12px solid rgb(255,0,0,0.1);
				overflow-y:scroll;
				position:relative;
				overflow-x:hidden;
			}
			.mydiv{
				width:100%;
				height:1200px;
				margin:0 auto;
				background-image:url('sqb33-handle.jpg');

			}
		</style>
	</head>
	<body>
	<div class="pDiv">
		<div id="mydiv" class="mydiv">
		
		</div>
	</div>
	<script>
			var zr = zrender.init(document.getElementById('mydiv'),{'renderer':'svg'});//canavs
			
			var h = zr.getHeight(),
			w = zr.getWidth(),
			line = new zrender.BezierCurve({
				shape: {
					x1: 0,
					y1: h,
					cpx1: w / 2,
					cpy1: h,
					cpx2: w / 2,
					cpy2: 0,
					x2: w,
					y2: 0
				},
				style: {
					stroke: 'green',
					lineWidth: 2
				}
			});
			zr.add(line);
			
			var startX, startY, diffX, diffY;
			var startL,startT;
			var newRect;
			var currRectId = null;
			
			$(function(){
				$('.pDiv').ruler();  
				startL = $('#mydiv').offset().left;
				startT = $('#mydiv').offset().top;		
				;
				$('#mydiv').width($('#mydiv').parent().width());

			});
			
			zr.on('mousedown',function(e){
				
				if(currRectId)return;
				
				e = window.event;
				startX = e.pageX;
				startY = e.pageY;
				
				newRect = new zrender.Rect({
					shape: {
						x: startX - startL,
						y: startY - startT,
						width: 0,
						height: 0
					},
					style: {
						fill: '#F00',
						opacity: 0.1
					},
					draggable: true,
					rectHover: true
				});
				
				zr.add(newRect);
				
				newRect.on('mousedown',function(){
					currRectId = this.id;
					return;
				})
			});
			
			zr.on('mousemove',function(e){
				e = window.event;
				diffX = e.pageX - startX;
				diffY = e.pageY - startY;
				
				if(newRect){
					newRect.attr({
						shape: {
							width: diffX,
							height:diffY
						}
					});
				
				}
				
			});
			
			zr.on('mouseup',function(){
				newRect = null;
				currRectId = null;
			});
		</script>
	</body>
</html>